<template>
    <div class="finance">
      <div class="bgcolor"></div>
      <h4 class="title">--理财精选--</h4>
      <div class="finance-item" v-for="(item,index) of list" :key="index">
        <img :src="item.imgUrl" alt="">
        <div class="item-des">
          <h4>{{item.title}}</h4>
          <p>{{item.desction}}</p>
        </div>
        <router-link :to="{name:item.href}" tag="em">去赚钱 ></router-link>
      </div>
    </div>
</template>

<script>
export default {
  name: 'moneyFinance',
  data () {
    return {
      list: [{
        href: 'home',
        imgUrl: '//img12.360buyimg.com/jrpmobile/jfs/t3670/58/543125556/2606/a65096b9/580d80afN63b1085a.png?width=76&height=76',
        title: '月度理财',
        desction: '预期年化收益率4.50%'
      }, {
        href: 'home',
        imgUrl: '//img12.360buyimg.com/jrpmobile/jfs/t3679/44/511862277/2728/c1c6b2bf/580d8189N6b6f8052.png?width=76&height=76',
        title: '季度理财',
        desction: '历史年化回报率5.50%'
      }, {
        href: 'home',
        imgUrl: '//img12.360buyimg.com/jrpmobile/jfs/t3331/69/580199498/3074/d5bb21c5/580d7f6cN7f35e596.png?width=76&height=76',
        title: '一年理财',
        desction: '历史年化回报率5.80%'
      }]
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '../../assets/css/varibles.styl'
  @import '../../assets/css/mixins.styl'
  .bgcolor
    pdTop()
  .title
    jdTitle()
  .finance-item
     display:flex
     height:1.4rem
     align-items: center
     line-height:1.6
     border-bottom: .02rem solid #ddd
  .finance-item:last-child
    border-bottom:none
   img
     width:.88rem
     height:.88rem
     margin: 0 .31rem
   .item-des
      flex:1
      color:#333
     h4
      ellipse()
     p
      color:#ff3232
      ellipse()
   em
    margin-right:.1rem
    color: #FF801A
</style>
